<template>
  <div>
    <div style="width: 100%; background: #fff; padding: 20px 20px 0 20px">
      <a-breadcrumb style="margin-bottom: 15px">
        <a-breadcrumb-item>商品</a-breadcrumb-item>
        <a-breadcrumb-item
          ><a href="javascipt:;" @click="$router.push({ name: 'GoodsList' })">商品列表</a></a-breadcrumb-item
        >
        <a-breadcrumb-item>{{ isEdit ? '编辑' : '添加' }}商品</a-breadcrumb-item>
      </a-breadcrumb>
      <a-tabs v-model="activeTab">
        <a-tab-pane key="1" tab="基础信息"></a-tab-pane>
        <a-tab-pane key="2" tab="图文设置"></a-tab-pane>
        <a-tab-pane key="3" tab="规格库存"></a-tab-pane>
        <a-tab-pane key="4" tab="会员价格设置"></a-tab-pane>
        <!-- <a-tab-pane key="4" tab="营销"></a-tab-pane> -->
        <!-- <a-tab-pane key="5" tab="分销设置"></a-tab-pane> -->
        <!-- <a-tab-pane key="7" tab="自定义表单"></a-tab-pane> -->
      </a-tabs>
    </div>
    <a-card style="margin: 20px" :bordered="false">
      <a-form-model :model="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
        <template v-if="activeTab == 1">
          <a-form-model-item label="商品分类" v-if="catList.length">
            {{form.cat_id | cat(catList)}}
          </a-form-model-item>
          <a-form-model-item label="商品名称">
            {{ form.name }}
          </a-form-model-item>
          <a-form-model-item label="关键字" hasFeedback>
            {{ form.key_word }}
          </a-form-model-item>
          <a-form-model-item label="单位">
            {{ form.unit }}
          </a-form-model-item>
          <a-form-model-item label="重量">
            {{ form.weight }}
          </a-form-model-item>
          <a-form-model-item label="售价">
            {{ form.price }}
          </a-form-model-item>
          <a-form-model-item label="成本价">
            {{ form.cost_price }}
          </a-form-model-item>
          <a-form-model-item label="原价">
            {{ form.original_price }}
          </a-form-model-item>
          <a-form-model-item label="服务内容">
            {{ form.service }}
          </a-form-model-item>
          <a-form-model-item label="运费设置">
            {{ form.freight | freight(postage) }}
          </a-form-model-item>
          <a-form-model-item label="已出售量" help="前端展示的销量=实际销量+已出售量">
            {{ form.virtual_sales }}件
          </a-form-model-item>
          <a-form-model-item label="限购数量"> {{ form.confine_count }}件 </a-form-model-item>
          <a-form-model-item label="单品满件包邮" help="如果设置0或空，则不支持满件包邮">
            {{ form.pieces || 0 }}件
          </a-form-model-item>
          <a-form-model-item label="单品满额包邮"> {{ form.forehead }}元 </a-form-model-item>
          <a-form-model-item label="是否开启面议">
            {{ form.is_negotiable == 0 ? '关闭' : '开启' }}
          </a-form-model-item>
          <a-form-model-item label="配送方式">
            {{ checkedList.join(' | ') }}
          </a-form-model-item>
        </template>
        <template v-if="activeTab == 2">
          <a-form-model-item label="缩略图">
            <div class="imgList">
              <div class="img">
                <img :src="form.cover_pic" alt="" />
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item v-if="form.video_url != ''" label="商品视频">
            <video :src="form.video_url" class="video" controls="controls"></video>
          </a-form-model-item>
          <a-form-model-item label="商品图片">
            <div class="imgList">
              <div class="img" v-for="(item, index) in form.goods_pic_list" :key="index">
                <img :src="item.pic_url" alt="" />
              </div>
            </div>
          </a-form-model-item>
          <a-form-model-item label="图文详情">
            <div class="content" v-html="form.content"></div>
          </a-form-model-item>
        </template>
        <template v-if="activeTab == 3">
          <a-form-model-item label="商品库存"> {{ form.goods_num }}件 </a-form-model-item>
          <a-form-model-item label="商品货号">
            {{ form.goods_no }}
          </a-form-model-item>
          <a-form-model-item v-if="isAttr == 1 && productType == 0" label="规格">
            <a-table
              v-if="GoodsAttr.length > 0"
              ref="table"
              :columns="attrColumns"
              :style="{ marginTop: '10px' }"
              bordered
              :dataSource="getGoodsAttrList"
              size="small"
              :row-key="(r, i) => JSON.stringify(r)"
              :pagination="false"
            >
              <span slot="attr_list" slot-scope="attr_list">
                <span style="margin-right: 4px" v-for="(item, index) of attr_list" :key="index">
                  {{ item.attr_name }}
                </span>
              </span>
              <template slot="num" slot-scope="num">
                {{ num }}
              </template>
              <template slot="price" slot-scope="price">
                {{ price }}
              </template>
              <template slot="no" slot-scope="no">
                {{ no }}
              </template>
              <template slot="pic" slot-scope="pic, attrItem, attrIndex">
                <div class="imgList">
                  <div class="img" style="margin-right: 0">
                    <img :src="GoodsAttr[getAttrActiveIndex(attrIndex)].pic" alt="" />
                  </div>
                </div>
              </template>
            </a-table>

            <el-pagination
              style="margin-top:10px;"
              :page-size="size"
              :current-page="page"
              background
              layout="prev, pager, next"
              @current-change="e => page = e"
              :total="GoodsAttr.length">
            </el-pagination>
          </a-form-model-item>
        </template>
        <template v-if="activeTab == 4">
          <a-form-item label="是否开启会员价">
            {{form.is_level == 0? '关闭':'开启'}}
          </a-form-item>
        </template>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
import pick from 'lodash.pick'
import { save, edit, Copy } from '@/api/goods/goods'
import { list as catListApi } from '@/api/goods/cat'
import { list as attrListApi } from '@/api/goods/attr'
import { STable, WangEditor } from '@/components'
import AdvancedForm from '../../form/advancedForm/AdvancedForm.vue'
import { findKey } from '@/utils/util'

function getDateArray(start, end, splitTime) {
  if (!splitTime || splitTime == '') {
    return
  }
  let y = new Date().getFullYear()
  let m = new Date().getMonth() + 1
  let d = new Date().getDate()
  let startTime = new Date(y + '/' + m + '/' + d + ' ' + start).getTime()
  let endTime = new Date(y + '/' + m + '/' + d + ' ' + end).getTime()
  let split = (splitTime - 0) * 60 * 1000
  let length = (endTime - startTime) / split + 1
  let arr = []
  if (length >= 1) {
    for (let i = 0; i < length; i++) {
      if (endTime > startTime + split * i) {
        let date = new Date(startTime + split * i)
        let h = date.getHours()
        let m = date.getMinutes()
        h = h < 10 ? '0' + h : h
        m = m < 10 ? '0' + m : m
        let date_1 = new Date(startTime + split * (i + 1))
        let h_1 = date_1.getHours()
        let m_1 = date_1.getMinutes()
        h_1 = h_1 < 10 ? '0' + h_1 : h_1
        m_1 = m_1 < 10 ? '0' + m_1 : m_1
        arr.push({
          time: h + ':' + m + '-' + h_1 + ':' + m_1,
          price: '',
          num: 0,
        })
      }
    }
  }
  return arr
}

const goodsInfo = {
  id: 0,
  name: '',
  key_word: '',
  unit: '件',
  price: '',
  weight: 0,
  cost_price: '',
  original_price: '',
  service: '',
  freight: '',
  pieces: '',
  forehead: '',
  quick_purchase: '0',
  video_url: '',
  content: '',
  goods_pic_list: [],
  goods_num: 0,
  goods_no: '',
  integral: { give: 0, forehead: 0, more: '0' },
  use_attr: '0',
  product_type: '0',
  is_negotiable: '0',
  cover_pic: '',
  individual_share: '0',
  share_type: '0',
  share_commission_first: 0.0,
  share_commission_second: 0.0,
  share_commission_third: 0.0,
  cat_id: [],
  attr_setting_type: 0,
  is_level: '0',
  deliverys: [],
  service_book: { data: [], date: 0, flag: 1 },
}

const attrColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 80,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '库存',
    dataIndex: 'num',
    width: 20,
    scopedSlots: {
      filterDropdown: 'numDropdown',
      filterIcon: 'numIcon',
      customRender: 'num',
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    width: 20,
    scopedSlots: {
      filterDropdown: 'priceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'price',
    },
  },
  {
    title: '货号',
    dataIndex: 'no',
    width: 20,
    scopedSlots: { customRender: 'no' },
    slots: { title: 'customNo' },
  },
  {
    title: '图片',
    dataIndex: 'pic',
    width: 20,
    scopedSlots: { customRender: 'pic' },
    slots: { title: 'customPic' },
  },
]

const attrBookColumns = [
  {
    title: '日期',
    dataIndex: 'date',
    width: 80,
  },
  {
    title: '库存',
    dataIndex: 'num',
    width: 20,
    scopedSlots: {
      filterDropdown: 'numDropdown',
      filterIcon: 'numIcon',
      customRender: 'num',
    },
  },
  {
    title: '价格',
    dataIndex: 'price',
    width: 20,
    scopedSlots: {
      filterDropdown: 'priceDropdown',
      filterIcon: 'priceIcon',
      customRender: 'price',
    },
  },
  {
    title: '操作',
    width: 80,
    scopedSlots: {
      customRender: 'action',
    },
  },
]

const sharaColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 80,
    scopedSlots: { customRender: 'attr_list' },
  },
  {
    title: '一级分销',
    dataIndex: 'share_commission_first',
    width: 20,
    scopedSlots: { customRender: 'share_commission_first' },
  },
  {
    title: '二级分销',
    dataIndex: 'share_commission_second',
    width: 20,
    scopedSlots: { customRender: 'share_commission_second' },
  },
  {
    title: '三级分销',
    dataIndex: 'share_commission_third',
    width: 20,
    scopedSlots: { customRender: 'share_commission_third' },
  },
]

const userLevelColumns = [
  {
    title: '规格',
    dataIndex: 'attr_list',
    width: 80,
    scopedSlots: { customRender: 'attr_list' },
  },
]
function platFn(list) {
  let res = []
  res = list.concat(...list.map(item => {
    if (item.children instanceof Array && item.children.length > 0) {
      return platFn(item.children)
    }
    return null
  }).filter(o => o instanceof Array && o.length > 0))
  return res
}
export default {
  components: {
    quillEditor,
    STable,
    AdvancedForm,
    WangEditor,
  },
  data() {
    return {
      goods_form: {
        is_form: '',
        form_name: '',
        form_list: [],
      },
      addType: 'text',
      createBookData: [],
      bookConfig: [],
      attrBookColumns,
      bookDay: 3,
      serviceBookDay: 7,
      activeTab: '1',
      copyType: 0,
      copyVal: '',
      form: this.$form.createForm(this),
      labelCol: {
        xs: { span: 24 },
        sm: { span: 2 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 22 },
      },
      butLoading: false,
      editorOption: {},
      catName: [],
      isAttr: 0,
      productType: 0,
      shareType: 0,
      attrSettingType: 0, // 是否开启详细分销设置
      goodsInfo: {},
      postage: [],
      catList: [],
      level: [], // 会员等级
      verify_list: [],
      goods_verify_card_list: [],
      select_cart_id: {},
      userLevelColumns: userLevelColumns, // 会员表格
      GoodsAttr: [], // 遍历后商品提交规格
      AttrGroupList: [], // 处理后的添加规格
      attrList: [], // 可选择类型
      attrColumns: attrColumns, // 商品规格表结构
      sharaColumns: sharaColumns, // 分销配置
      autoFocusData: { type: '', index: 0 }, // 获取焦点参数,
      bookFocusData: { index: 0 }, // 预约焦点参数
      addAttrData: { groupName: '' }, // 添加规格数据
      hideDistribution: false, // 隐藏分销配置
      hideLevelDistribution: false, // 隐藏会员配置
      delivery_type: null,
      checkedList: [],
      deliveryOptions: [],
      times: {
        start: '',
        end: '',
      },
      serviceBookData: {
        data: [],
        date: 0,
        flag: 1,
      },
      form: {},
      page:1,
      size:30
    }
  },
  created() {
    this.getCatList()
    this.getAttrList()
    var goodsId = this.$route.query.id
    this.getGoodsData(goodsId)
  },
  computed: {
    getAttrActiveIndex(){
      return (index)=>{
        let {page,size} = this,
        active = (page-1) * size + index;

        return active
      }
    },
    
    getGoodsAttrList(){
      let {GoodsAttr,page,size} = this,
      index = (page-1) * size;
      return JSON.parse(JSON.stringify(GoodsAttr)).splice(index,size) || []
    },
    isEdit() {
      return this.$route.query.id ? true : false
    },
    serviceBookDate() {
      let arr = this.serviceBookData.data || []
      var nowDate = moment().format('YYYY-MM-DD')
      arr.forEach((item, index) => {
        if (index == 0) {
          if (item.date == '') {
            item.date = nowDate
          }
        } else {
          if (item.date == '') {
            item.date = this.dateNext(arr[index - 1].date)
          }
        }
      })
      return arr
    },
    // serviceTimeData() {
    //   return (data) => {
    //     let arr = []
    //     data.time.forEach((item) => {
    //       item.times.forEach((time) => {
    //         arr.push(time)
    //       })
    //     })
    //     return arr
    //   }
    // },
  },
  watch: {
    $route: function (val) {
      this.getCatList()
      if (val.query.id > 0) {
        this.getGoodsData(val.query.id)
      } else {
        this.goodsInfo = goodsInfo
      }
    },
    goodsInfo(val) {
      this.updateData()
    },
    AttrGroupList(val) {
      this.setGoodsAttr(val)
    },
    level(val) {
      // 监听会员等级变化
      if (val.length > 0) {
        this.userLevelColumns = [
          {
            title: '规格',
            dataIndex: 'attr_list',
            width: 80,
            scopedSlots: { customRender: 'attr_list' },
          },
        ]
        val.forEach((el) => {
          this.userLevelColumns.push({
            title: el.name,
            dataIndex: 'member' + el.id,
            width: 80,
            scopedSlots: { customRender: 'memberInfo' },
          })
        })
      }
    },
  },
  methods: {
    // 重置预约服务日期
    resetData() {
      let arr = []

      for (let i = 0; i < this.serviceBookData.date; i++) {
        arr.push({
          date: '',
          time: [],
          num: 0,
        })
      }
      console.log(this.serviceBookData.data, arr)
      this.serviceBookData.data = arr
    },
    // 删除日期
    deleteDate(row, index) {
      console.log(row, index)
      this.serviceBookData.data.splice(index, 1)
      this.serviceBookData.data.push({
        date: '',
        time: [],
        num: 0,
      })
      console.log(this.serviceBookData.data)
    },
    deleteBookDate(row, index) {
      this.bookConfig.splice(index, 1)
      this.createBookData.splice(index, 1)
      let bookDate = this.bookConfig[this.bookConfig.length - 1].date
      let createDate = this.createBookData[this.createBookData.length - 1].date
      this.bookConfig.push({
        date: this.dateNext(bookDate),
        num: 0,
        price: 0,
      })
      this.createBookData.push({
        date: this.dateNext(createDate),
        num: 0,
        price: 0,
      })
    },
    setData() {
      this.bookDay = 30
      this.createBookData = []
      var lastDate = moment().format('YYYY-MM-DD')
      for (var $i = 0; $i < 30; $i++) {
        if ($i > 0) {
          lastDate = this.dateNext(lastDate)
        }
        this.createBookData.push({ date: lastDate, num: 0, price: 0.0 })
      }
      console.log(this.createBookData)
      this.bookConfig = this.createBookData
    },
    dateNext(d) {
      d = new Date(d)
      d = +d + 1000 * 60 * 60 * 24
      d = new Date(d)
      // 格式化
      let month = d.getMonth() + 1 > 9 ? d.getMonth() + 1 : '0' + (d.getMonth() + 1)
      let date = d.getDate() > 9 ? d.getDate() : '0' + d.getDate()
      return d.getFullYear() + '-' + month + '-' + date
    },
    /**
     * 获取商品详情
     */
    getGoodsData(goodsId) {
      const hide = this.$message.loading('加载中', 0)
      // this.goodsInfo = {}
      edit({ id: goodsId }).then((res) => {
        console.log(res.data, 'info')
        if (res.data.info && res.data.info.id > 0) {
          this.goodsInfo = res.data.info
        } else {
          this.goodsInfo = goodsInfo
        }
        let info = res.data.info
        this.postage = res.data.postage
        this.level = res.data.level
        this.verify_list = res.data.verify_list
        this.goods_verify_card_list = res.data.goods_verify_card_list
        this.delivery_type = res.data.info ? res.data.info.delivery_type : []
        this.serviceBookData = res.data.info.service_book
        console.log(res.data.info.service_book, 'fuwuyuyue')
        this.bookConfig = res.data.info.date_book.data
        this.bookDay = res.data.info.date_book.date
        this.goods_form = res.data.info.form
        if (info && info.delivery_type) {
          this.deliveryOptions = Object.values(info.delivery_type)
        }
        try {
          let goods_delivery_type = JSON.parse(JSON.stringify(info.goods_delivery_type))
          goods_delivery_type.forEach((d, index) => {
            goods_delivery_type.splice(index, 1, info.delivery_type[d])
          })
          this.checkedList = goods_delivery_type ? goods_delivery_type : Object.values(info.delivery_type)
        } catch (err) {
          console.log(err)
        }

        if (res.data.AttrGroupList.length === 0) {
          this.setDefaultAttr()
        } else {
          this.AttrGroupList = res.data.AttrGroupList
        }
        this.updateData()
        hide()
      })
    },
    /**
     * 渲染form表单
     */
    updateData() {
      this.shareType = this.goodsInfo.share_type
      this.attrSettingType = this.goodsInfo.attr_setting_type
      this.isAttr = this.goodsInfo.use_attr
      this.productType = this.goodsInfo.product_type
      this.hideDistribution = this.goodsInfo.individual_share == 0 ? true : false
      this.hideLevelDistribution = this.goodsInfo.is_level == 0 ? true : false
      this.form = this.goodsInfo
    },
    setDefaultAttr() {
      this.GoodsAttr = [
        {
          attr_list: [
            {
              attr_name: '默认',
            },
          ],
          num: 0,
          price: 0,
          supplier_price: 0,
          no: '',
          pic: '',
          share_commission_first: '',
          share_commission_second: '',
          share_commission_third: '',
        },
      ]
    },
    /**
     * 获取分类
     */
    getCatList() {
      catListApi({ is_show: -1 }).then((res) => {
        this.catList = res.data.list
      })
    },
    onChangeCat(e) {
      console.log('onChangeCat', e)
    },
    /**
     * 获取添加规格类型
     */
    getAttrList() {
      attrListApi().then((res) => {
        this.attrList = res.data.list
      })
    },
    /**
     * 选中规格类型处理
     */
    attrSelectChange(e) {
      var attr = this.attrList[e]
      var AttrGroupList = []
      attr.children.forEach((element) => {
        var attrItem = []
        element.children.forEach((element2) => {
          attrItem.push({
            attr_name: element2.name,
          })
        })
        var attrGroup = {
          attr_group_name: element.name,
          attr_list: attrItem,
        }
        AttrGroupList.push(attrGroup)
      })
      this.AttrGroupList = AttrGroupList
    },
    /**
     * 规格类型筛选
     */
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
    },
    /**
     * 根据添加规格，生成规格数据
     */
    setGoodsAttr(attrGroup) {
      let attrList = []
      attrList = this.setGoodsAttrItem(attrGroup, [], 0)
      this.GoodsAttr = this.getAttrDataInfo(attrList)
    },
    /**
     * 处理规格数据
     */
    setGoodsAttrItem(attrGroup, attrList, index) {
      var attrList1 = []
      if (index < attrGroup.length) {
        if (index === 0 || attrList.length === 0) {
          if (attrGroup[index].attr_list.length > 0) {
            attrGroup[index].attr_list.forEach((element) => {
              element.attr_group_name = attrGroup[index].attr_group_name
              attrList1.push([element])
            })
          }
        } else {
          if (attrGroup[index].attr_list.length > 0) {
            attrList.forEach((element) => {
              attrGroup[index].attr_list.forEach((element1) => {
                element1.attr_group_name = attrGroup[index].attr_group_name
                attrList1.push(element.concat([element1]))
              })
            })
          } else {
            attrList1 = attrList
          }
        }
        ++index
        return this.setGoodsAttrItem(attrGroup, attrList1, index)
      } else {
        return attrList
      }
    },
    /**
     * 获取其他详细数据
     */
    getAttrDataInfo(attr) {
      var attrList = []
      attr.forEach((element) => {
        var setAttr = {}
        if (this.goodsInfo.attr) {
          JSON.parse(this.goodsInfo.attr).forEach((element2) => {
            if (element2.attr_list.length === element.length) {
              var loading = true
              if (loading && this.compareAttr(element2.attr_list, element)) {
                setAttr = element2
                loading = false
              }
            }
          })
        }
        var data = {
          attr_list: element,
          num: setAttr && setAttr.num ? setAttr.num : 0,
          price: setAttr && setAttr.price ? setAttr.price : 0,
          no: setAttr && setAttr.no ? setAttr.no : '',
          pic: setAttr && setAttr.pic ? setAttr.pic : '',
          share_commission_first: setAttr && setAttr.share_commission_first ? setAttr.share_commission_first : '',
          share_commission_second: setAttr && setAttr.share_commission_second ? setAttr.share_commission_second : '',
          share_commission_third: setAttr && setAttr.share_commission_third ? setAttr.share_commission_third : '',
        }
        for (const key in setAttr) {
          if (key.indexOf('member') !== -1) {
            data[key] = setAttr[key]
          }
        }
        attrList.push(data)
      })
      return attrList
    },
    compareAttr(val1, val2) {
      var compareLen = 0
      val1.forEach((element1) => {
        val2.forEach((element2) => {
          if (element1.attr_name === element2.attr_name) {
            compareLen++
          }
        })
      })
      return compareLen === val1.length
    },
    /**
     * 修改规格数据
     */
    handleChange(value, type, index) {
      console.log(value)
      this.autoFocusData = {
        type: type,
        index: index,
      }
      this.GoodsAttr[index][type] = value === null ? '' : value
    },
    /**
     * 修改预约规格数据
     */
    handleBookChange(value, type, index) {
      console.log(value)
      this.bookFocusData = {
        type: type,
        index: index,
      }
      this.bookConfig[index][type] = value === null ? '' : value
    },
    /**
     * 添加规格组
     */
    addAttrGroup() {
      if (this.addAttrData.groupName) {
        var data = {
          attr_group_name: this.addAttrData.groupName,
          attr_list: [],
        }
        this.AttrGroupList.push(data)
      }
      this.addAttrData.groupName = ''
    },
    /**
     * 添加规格值
     */
    addAttr(e, index, groupName) {
      var data = {
        attr_group_name: groupName,
        attr_name: e,
      }
      var attrGroup = this.AttrGroupList
      attrGroup[index].attr_list.push(data)
      this.AttrGroupList = null
      this.AttrGroupList = attrGroup
    },
    /**
     * 删除规格组
     */
    delAttrGroup(index) {
      this.AttrGroupList.splice(index, 1)
    },
    delAttr(index1, index2) {
      var attrGroup = this.AttrGroupList
      attrGroup[index1].attr_list.splice(index2, 1)
      this.AttrGroupList = null
      this.AttrGroupList = attrGroup
    },
    settingAll(e, setSelectedKeys, selectedKeys) {
      console.log('selectedKeys', selectedKeys)
      console.log('setSelectedKeys', setSelectedKeys)
      this.GoodsAttr.forEach((element, index) => {
        this.GoodsAttr[index][setSelectedKeys.column.dataIndex] = e
      })
    },
    settingDayAll(e, setSelectedKeys, selectedKeys) {
      console.log('selectedKeys', selectedKeys)
      console.log('setSelectedKeys', setSelectedKeys)
      this.bookConfig.forEach((element, index) => {
        this.bookConfig[index][setSelectedKeys.column.dataIndex] = e
      })
    },
    goodsCopy() {
      const hide = this.$message.loading('加载中', 0)
      if (this.copyType > 0) {
        edit({ id: this.copyVal }).then((res) => {
          var goods = res.data.info
          delete goods.id
          this.goodsInfo = goods
          if (res.data.AttrGroupList.length === 0) {
            this.setDefaultAttr()
          } else {
            this.AttrGroupList = res.data.AttrGroupList
          }
          this.updateData()
          hide()
        })
      } else {
        Copy({
          url: this.copyVal,
        }).then((res) => {
          hide()
          console.log(res.data.attr_group_list)
          if (res.code === 0) {
            this.AttrGroupList = res.data.attr_group_list ? JSON.parse(res.data.attr_group_list) : []
            var goods = this.goodsInfo
            delete goods.id
            this.goodsInfo = {}
            let pic = []
            goods.content = res.data.detail_info
            res.data.picsPath.forEach((item) => {
              pic.push({ pic_url: item })
            })
            goods.cover_pic = res.data.pic_url
            goods.goods_pic_list = pic
            goods.price = res.data.price
            goods.name = res.data.title
            goods.attr = res.data.checked_attr_list
            goods.use_attr = this.AttrGroupList.length > 0 ? '1' : '0'
            this.goodsInfo = goods
          }
        })
      }
    },
    delPic(picIndex) {
      this.goodsInfo.goods_pic_list.splice(picIndex, 1)
    },
    selectPic(e) {
      console.log('eeeeeeeeee', e)
      console.log(this.goodsInfo)
      this.goodsInfo.goods_pic_list = this.goodsInfo.goods_pic_list ? this.goodsInfo.goods_pic_list : []
      e.forEach((ele) => {
        this.goodsInfo.goods_pic_list.push({ pic_url: ele })
      })
      console.log(this.goodsInfo)
    },
    changeChecked(e, index) {
      let checked = e.target.checked ? 1 : 0
      console.log(this.goods_form.form_list)
      this.goods_form.form_list[index].required = checked
    },
    addList() {
      this.goods_form.form_list.push({
        type: this.addType,
        name: '',
        tip: '',
        required: '0',
        sort: '0',
        is_delete: '0',
      })
    },
    deleteItem(index) {
      console.log(index)
      this.goods_form.form_list.splice(index, 1)
    },
  },
  filters: {
    freight(val, post) {
      if (val) {
        if (val == 0) {
          return '默认'
        } else {
          let index = post.findIndex((item) => {
            return item.id == val
          })
          console.log(index)
          return post[index].name
        }
      }
    },
    cat(val,list) {
      let cat = platFn(list)
      let arr = []
      val.forEach(item => {
        cat.forEach(catItem => {
          if(catItem.id == item) {
            arr.push(catItem.name)
          }
        });
      });
      return arr.join(' ')
    }
  },
}
</script>
<style scoped lang="less">
/deep/.ant-tabs-bar {
  margin: 0;
}
/deep/.ant-tabs-nav .ant-tabs-tab {
  padding: 10px 0;
  margin: 0 49px 0 0;
}
.required::before {
  content: '*';
  color: red;
}
td {
  padding: 0 6px;
}
th {
  padding: 0 6px;
}
tr:hover {
  background: #f0f0f0;
}
.goods_pic_item {
  width: 80px;
  height: 80px;
  border-radius: 3px;
}
.goods_pic_item_box {
  margin-top: 10px;
  width: 80px;
  height: 80px;
  box-shadow: 0 0 5px rgba(170, 170, 170, 0.671);
  border-radius: 3px;
  position: relative;
  margin-right: 10px;
}
.goods_pic_item_box .icon {
  position: absolute;
  top: 2px;
  right: 2px;
  /* margin-right: 10px; */
}
.timeSlot {
  display: flex;
  align-items: center;
}
.timePrice div {
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
    width: 100px;
    min-width: 60px;
  }
}
.tips {
  display: flex;
  flex-direction: column;
  color: #d9534f;
  font-size: 14px;
  span {
    line-height: normal;
  }
}
.add {
  display: flex;
  align-items: center;
}
.warning {
  font-size: 14px;
  color: #d9534f;
  margin-top: 20px;
}
.table {
  width: 100%;
  padding: 10px;
  background-color: rgb(246, 248, 249);
  .title {
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.list {
  margin-top: 10px;
  .item {
    background-color: #fff;
    padding: 5px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    .ant-col {
      text-align: center;
      padding: 0 10px;
    }
  }
}
.tip {
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: normal;
  text-align: left;
}
.imgList {
  display: flex;
  flex-wrap: wrap;
  .img {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    overflow: hidden;
    margin-right: 10px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.content {
  width: 100%;
  max-height: 300px;
  overflow-y: auto;
}
.video {
  width: 200px;
  height: 200px;
}
</style>
